<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, all" />
  <title>WebGL Earth API - Basic Leaflet compatibility</title>

  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

  <script src="../cesium/Build/Cesium/Cesium.js"></script>
  <script src="http://localhost:9810/compile?id=api-debug"></script>

  <script>
    var m = {};
    function start() {
      start_(L, 'L');
      start_(WE, 'WE');
    }
    function start_(API, suffix) {
      var mapDiv = 'map' + suffix, coordsDiv = 'coords' + suffix, infoDiv = 'info' + suffix;
      var map = API.map(mapDiv, {
        center: [51.505, -0.09],
        zoom: 5,
        dragging: true, //panning
        scrollWheelZoom: true, //zooming
        proxyHost: 'http://srtm.webglearth.com/cgi-bin/corsproxy.fcgi?url='
      });
      m[suffix] = map;

      API.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        subdomains: 'abc',
        attribution: '© <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
        maxZoom: 18
      }).addTo(map);

      var overlay = API.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        subdomains: 'abc',
        attribution: '© <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors',
        maxZoom: 18,
        opacity: 0.5
      }).addTo(map);

      //overlay.setOpacity(0.5);
      document.getElementById('opacity').addEventListener('change', function(e) {
        overlay.setOpacity(e.target.value);
      });

      var json = {"profile":"mercator","name":"Grand Canyon USGS","format":"png","bounds":[-112.26379395,35.98245136,-112.10998535,36.13343831],"minzoom":10,"version":"1.0.0","maxzoom":16,"center":[-112.18688965,36.057944835,13],"type":"overlay","description":"","basename":"grandcanyon","tilejson":"2.0.0","sheme":"xyz","tiles":["http://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png"]};
      if (API.tileLayerJSON) {
        var overlay2 = API.tileLayerJSON(json, map);

        overlay2.setOpacity(0.7);
        document.getElementById('opacity2').addEventListener('change', function(e) {
          overlay2.setOpacity(e.target.value);
        });
      } else {
        // if not able to display the overlay, at least move to the same location
        map.setView([json.center[1], json.center[0]], json.center[2]);
      }
      API.marker([json.center[1], json.center[0]]).addTo(map);


      //Print coordinates of the mouse
      map.on('mousemove', function(e) {
        document.getElementById(coordsDiv).innerHTML = e.latlng.lat + ', ' + e.latlng.lng;
      });

      //Show coordinates on click, then unregister the listener
      var listenKey;
      var alertCoords = function(e) {
        document.getElementById(infoDiv).innerHTML = e.latlng.lat + ', ' + e.latlng.lng;
        map.off('click', alertCoords);
      };
      listenKey = map.on('click', alertCoords);
    }

    function addSomeMarkers() {
      addSomeMarkers_(L, 'L');
      addSomeMarkers_(WE, 'WE');

      document.getElementById("addmarkers").disabled = true;
    }

    function addSomeMarkers_(API, suffix) {
      m[suffix].setView([51.505, 0], 5);
      var marker = API.marker([51.5, -0.09]).addTo(m[suffix]);
      marker.bindPopup("<b>Hello world!</b><br>I am a popup.<br /><span style='font-size:10px;color:#999'>Tip: Another popup is hidden in Cairo..</span>", {maxWidth: 150, closeButton: true}).openPopup();

      var marker2 = API.marker([30.058056, 31.228889]).addTo(m[suffix]);
      marker2.bindPopup("<b>Cairo</b><br>Yay, you found me!<br />Here, enjoy another polygon..", {maxWidth: 120, closeButton: false});

      var polygonA = API.polygon([[50, 1], [51, 0.5], [50.5, 2.5]]).addTo(m[suffix]);
      var polygonB = API.polygon([[50, 3], [51, 2.5], [50.5, 4.5]], {
        color: '#ff0',
        opacity: 1,
        fillColor: '#f00',
        fillOpacity: 0.1,
        weight: 2
      }).addTo(m[suffix]);

      var anotherPolygon = function(e) {
        API.polygon([[30, 30], [29, 31], [30, 32], [32, 32], [31, 30]], {
          color: '#000',
          opacity: 1,
          fillColor: '#0f0',
          fillOpacity: 0.7,
          weight: 2
        }).addTo(m[suffix]);
        marker2.off('click', anotherPolygon);
      };
      marker2.on('click', anotherPolygon);

      /*var londonM = app.initMarker(51.507222, -0.1275);
      var denverM = app.initMarker(39.739167, -104.984722);
      var cairoM = app.initMarker(30.058056, 31.228889);

      londonM.bindPopup('<h2>London</h2>This marker is already opened.', 250).openPopup();
      denverM.bindPopup('<h2>Denver</h2>You can\'t see this marker without rotating the Earth.');

      cairoM.bindPopup('<h2>Cairo</h2>Click on me to close London\'s marker.').openPopup();

      var closeLondon = function(e) {
        alert(e.latitude + ', ' + e.longitude);
        londonM.closePopup();
      };
      cairoM.on('click', closeLondon);
      */
    }
  </script>
  <style>
    .plovr-error-report {z-index:1000000;position:absolute;}
    #mapL, #mapWE {position:absolute !important;width:50%;height:400px;top:0;}
    #infoL, #infoWE {position:absolute !important;width:50%;height:20px;top:400px;}
    #coordsL, #coordsWE {position:absolute !important;width:50%;height:20px;top:420px;}
    #buttons {position:absolute; top:440px;}
    .L {left:0;}
    .WE {right:0;}
  </style>
 </head>
 <body onload="javascript:start()">
   <div id="mapL" class="L"></div>
   <div id="mapWE" class="WE"></div>
   <div id="infoL" class="L"></div>
   <div id="infoWE" class="WE"></div>
   <div id="coordsL" class="L"></div>
   <div id="coordsWE" class="WE"></div>
   <div id="buttons">
     <input type="button" value="Zoom to level 9" onclick="javascript:m['L'].setZoom(9);m['WE'].setZoom(9);" />
     <input type="button" value="What's current zoom level?" onclick="javascript:alert(m['L'].getZoom() + ' ; ' + m['WE'].getZoom());" />
     &nbsp;&nbsp;&nbsp;
     <input type="button" value="Set position to Mount Everest" onclick="javascript:m['L'].setView([27.988056, 86.925278]);m['WE'].setView([27.988056, 86.925278]);" />
     <input type="button" value="What's current position?" onclick="javascript:alert(m['L'].getCenter() + ' ; ' + m['WE'].getCenter());" />
     <br />
     Second layer opacity: 0<input type="range" id="opacity" min="0" max="1" step="0.01" value="0.5">1
     &nbsp;&nbsp;&nbsp;
     Grand Canyon overlay opacity: 0<input type="range" id="opacity2" min="0" max="1" step="0.01" value="0.7">1
     <br />
     <input type="button" value="Fly to Japan bounds" onclick="javascript:m['L'].fitBounds([[22,122],[48,154]]); m['WE'].panInsideBounds([[22,122],[48,154]], {heading:90, tilt:25, duration:1});" />
     <input type="button" value="Fly to Iceland" onclick="javascript:m['L'].panTo([65,-19]);m['WE'].panTo([65,-19]);" />
     <br />
     <input type="button" value="Add some markers & polygons" id="addmarkers" onclick="javascript:addSomeMarkers()" />
   </div>
 </body>
</html>
